{% extends 'base.html' %}
{% block title %}Products{% endblock %}
{% load thumbnail %}

{% block content %}
    <h1>Products</h1>
    <h2>Fishes</h2>
    <div class="div_columns">
    {% for f in fishes  %}
        <div class="column" onclick="changeLink('{{  f.get_absolute_url }}');">
            <div class="column_head">{{ f.name }}</div>
            <div class="column_image">
                {% thumbnail f.image "230" as im %}
                    <img  src="{{im.url }}" alt="{{ f.name }}" height="{{ im.height }}" width="{{ im.width }}"/>
                {% endthumbnail %}
            </div>
            <div class="column_more">Nánar...</div>
        </div>
    {%  endfor %}
    </div>
    <div class="div_columns">
    <h2>Types</h2>
        {% for t in types  %}
        <div class="column" onclick="changeLink('{{   t.get_absolute_url }}');">
            <div class="column_head">{{ t.description }}</div>
            <div class="column_image">
                {% thumbnail t.image "230x90" crop="center" as im %}
                    <img  src="{{im.url }}" alt="{{ t.description }}" height="{{ im.height }}" width="{{ im.width }}"/>
                {% endthumbnail %}
            </div>
            <div class="column_more">Nánar...</div>
        </div>
        {%  endfor %}
    </div>
{% endblock %}